<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm row items-start">
      <TUploader
      />

      <TUploader
        flat
        bordered

      />
      <TUploader

        label="Upload files"
        square
        flat
        bordered

      />
    </div>
  </div>
</template>

<style>
  .t-uploader {
  width: 100%;
  outline: 0!important;
  max-height: 630px;
  .q-uploader__header {
    height: 50%;
    .uploader__background{
          .q-icon{
      font-size: 80px;
      margin-bottom: 3px;
    }
      .q-uploader__title{
        font-weight: unset;
        font-size: 16px;
      color: rgba(0,0,0,0.9);
      }
    }

  }
  .q-uploader__list{
    padding: 6px 16px;
    .q-list{
      .q-item{
        padding: 10px 0;
        .upload-list-icon{
          padding-right: 12px;
          padding-top: 5px;
        }
      }
    }
    .t-linear-progress {
    color: var(--t-color)!important;
}
  }
  .upload-label{
    font-size: 14px;
    color: rgba(0,0,0,0.9);
  }
}
 .upload-rules{
   font-size: 14px;
   font-weight: bold;
   display: block;
   line-height: 1;
   color: rgba(0,0,0,0.9);
 }
      .upload-ruleslist{
            margin-left: 12px;
            list-style: decimal;
             color: rgba(0,0,0,0.56);
    display: flex;
    flex-direction: column;
        .upload-maxfilesize{
           display: list-item;
             color: rgba(0,0,0,0.56);
          font-size: 12px;
    }
    .upload-other-rules{
      display: list-item;
      font-size: 12px;
    }
  }
  .upload-list{
    font-size: 14px;
    font-weight: bold;
    padding: 2px 16px;
  }
  .upload-list-title{
    color: rgba(0,0,0,0.9);
  }
  .upload-typelabel{
    font-size: 12px;
  color: rgba(0,0,0,0.56);
  }
  .upload-maxfile{
    font-size: 12px;
    display: block;
  color: rgba(0,0,0,0.56);
  }
  .uploadfiles-list{
    max-height: 240px;
    .q-item__label{
  color: rgba(0,0,0,0.56);
    }
.q-linear-progress__track{
  opacity: 1;
}
  }
  .upload-separator{
        font-size: 12px;
  color: rgba(0,0,0,0.56);
  }
   .upload-clickable{
    color: var(--t-color) !important;
    cursor: pointer;
    margin-left:5px;
    min-height: 2em!important;
    padding: unset!important;
    min-width: unset;
    margin-bottom: 2px;
   }
  .uploader-dialog .q-dialog__backdrop{
    background-color: rgba(0,0,0,0);
  }
   .uploader__background{
    border-radius: 2px;
     border: 1px dashed #b2d6f2; /* 1px宽度的虚线边框，颜色为黑色 */
    /* 内部间距，根据需要调整 */
    margin-top: 12px;
    margin-bottom: 10px;
    padding-top: 24px;
    margin-left: 16px;
    margin-right: 16px;
    height: 185px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
  }
 .upload-typerules{
    line-height: 1;
    display: flex;
    flex-direction: row;
    margin-top: 1px;
    color: rgba(0,0,0,0.56);
 }
  .upload-label-tips{
    font-size: 12px;
    color: rgba(0,0,0,0.56);
  }
  .upload-filename{
    color: #000000;
    font-size: 14px;
  }

  @media screen and (max-width: 767px) {
   .upload-typerules{
 flex-direction:column;
 align-items: center;
   }
     .upload-separator{
      display: none;
  }
.upload-typelabel{
  margin-bottom: 6px;
}
}

</style>
